<template>
    <div class="createContainer">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="订单" prop="order">
                <el-select v-model="ruleForm.order" clearable placeholder="请选择">
                    <el-option
                        v-for="item in orderlist"
                        :key="item.value"
                        :label="item.ordernum"
                        :value="item.id"
                    >
                    <span style="width:50px;height:50px;float:left;" class="orderoptions">
                        <el-image style="width:100%;width:100%;" :src="item.goods.goodCoverImg"></el-image>
                    </span>
                    <span style="float:right;">{{item.ordernum}}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细" prop="details">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.details"></el-input>
            </el-form-item>
            <el-form-item label="工单类型" prop="servertype">
                <el-select v-model="ruleForm.servertype" clearable placeholder="请选择">
                    <el-option
                        v-for="item in serverTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="解决方案" prop="solution">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.solution"></el-input>
            </el-form-item>
            <el-form-item label="后备方案" prop="backupsolution">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="ruleForm.backupsolution"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        // 验证工单类型
        var checkservertype = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("请选择工单类型"));
            } else {
                callback();
            }
        };
        // 订单选择验证
        var validateorder = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请选择相应订单"));
            } else {
                callback();
            }
        };
        // 工单详细描述
        var validatedetails = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请描述详细"));
            } else {
                callback();
            }
        };
        // 验证工单解决方案
        var validatesolution = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入解决方案"));
            } else {
                callback();
            }
        };
        // 验证工单后备解决方案
        var validatebackupsolution = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入后备解决方案"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                order: "",
                details: "",
                servertype: "",
                solution: "",
                backupsolution: ""
            },
            rules: {
                order: [{ validator: validateorder, trigger: "blur" }],
                details: [{ validator: validatedetails, trigger: "blur" }],
                servertype: [{ validator: checkservertype, trigger: "blur" }],
                solution: [{ validator: validatesolution, trigger: "blur" }],
                backupsolution: [
                    { validator: validatebackupsolution, trigger: "blur" }
                ]
            },
            serverTypeList: [
                {value:"1",label:"退货退款"},
                {value:"2",label:"物流延迟"},
                {value:"3",label:"以旧换新"},
                {value:"4",label:"期内保修"},
                {value:"5",label:"技术求救"},
                {value:"6",label:"其他类型"}
            ],
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert("submit!");
                    console.log(this.ruleForm);
                    this.$ajax.post("/servercenter/",this.ruleForm).then(res=>{
                        this.$notify({
                            message:"提交工单成功!",
                            type:"success"
                        })
                        window.location.reload();
                    }).catch(err=>{
                        this.$notify({
                            message:"网络错误",
                            type:"warning"
                        })
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    props:["orderlist"]
};
</script>

<style lang="scss" scoped>
.el-select-dropdown__item{
    height: auto;
}
.createContainer {
    width: 60%;
    margin: 15px auto;
}
</style>